<!-- index-right -->
<template>
  <div class="index-right">
    <!-- 右上 -->
    <div class="box-container">
      <!--  -->
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <Chart4></Chart4>
        <!-- <PublicEcharts
            :option="this.indexDeviceData"
            :msg="'设备概况'"
            :id="'indexDeviceData'"
            ref="indexDeviceData"
          ></PublicEcharts> -->
      </dv-border-box-10>
    </div>
    <!-- 右中 -->
    <div class="box-container">
      <!--  -->
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <dv-border-box-8 :dur="10" :color="['rgba(0,0,0,0)']">
          <Chart5></Chart5>
        </dv-border-box-8>
      </dv-border-box-10>
    </div>
    <!-- 右下 -->
    <div class="box-container">
      <!--  -->
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <Chart6></Chart6>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import Chart4 from "../chart/Chart4"; // 4
import Chart5 from "../chart/Chart5"; // 5
import Chart6 from "../chart/Chart6"; // 6

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Chart4, Chart5, Chart6 },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.init()
    // console.log('index-right')
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.index-right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // padding: 0 1%;
  .box-container {
    width: 96%;
    flex: 1;
    padding: 2%;
    overflow: hidden;
    cursor: pointer;
    .todo1 {
      width: 60%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>